<template>
  <div class="layout">
    <ul class="list">
      <li
        class="category_list"
        v-for="(item, index) in categoryStore.getCategoryList"
        :key="item.id"
        @mouseover="showLayer(index, item)" @click="showLayer(index, item)"
        @mouseleave="onMouseleave"
      >
        <router-link to="/">
          <span class="categoryName">{{ item.name }}</span>
        </router-link>
        <router-link to="/">
          <span v-for="item in item.children.slice(0,2)" :key="item.id"
            class="categoryContent"
            @mouseover="showLayer(index, item)" @click="showLayer(index, item)"
            @mouseleave="onMouseleave"
            >{{item.name}}</span>
        </router-link>

        <!-- 弹出层位置 -->
        <div class="layer" v-if="activeLayer === index && isLeave === false">
          <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
          <div class="box">
            <div class="item" v-for="item in item.goods" :key="item.id">
              <div class="img"><img v-img-lazy ="item.picture" alt="" /></div>
              <div class="goodsInfo">
                <p class="title">{{item.name}}</p>
                <p class="details">{{item.desc}}</p>
                <p class="price">{{item.price}}元</p>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref,onMounted,onBeforeMount } from "vue";
import useCategory from '@/stores/category'

//使用pinia中的数据
const categoryStore = useCategory()

const activeLayer = ref(null); // 用于跟踪当前显示的弹出层
const hoveredItem = ref(null);
const isLeave = ref(false)

const showLayer = (index, item) => {
    isLeave.value = false
    hoveredItem.value = item;
    activeLayer.value = activeLayer.value === index ? null : index; // 切换显示状态
};

// 鼠标离开时清除
function onMouseleave() {
    isLeave.value = true
    hoveredItem.value = null;
}

onMounted(() => {
    //获取页面滚动高度
    window.addEventListener('scroll', handleScroll);
});

onBeforeMount(() => {
    window.removeEventListener('scroll', handleScroll);
});

// 处理滚动事件
const handleScroll = () => {
  // console.log(window.scrollY);
  isLeave.value = window.scrollY > 200; // 当滚动超过150px时，隐藏
};
</script>

<style lang="scss" scoped>
.layout {
  .list {
    position: absolute;
    top: 0; // 顶部对齐
    left: 0; // 左侧对齐
    width: 250px;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); // 黑色透明背景
    margin-bottom: 20px;
    .category_list {
      width: 100%;
      margin-bottom: 5px;
      height: 40px;
      &:hover {
        background: #40e0d0; 
        cursor: pointer; 
      }

      .categoryName {
        margin: 5px 20px;
        font-size: 20px;
        color: white;
      }
      .categoryContent {
        padding-left: 5px;
        font-size: 15px;
        color: white;
      }

      .layer {
        position: absolute; // 绝对定位
        top: 0;
        left: 250px;
        width: 1050px;
        height: 400px;
        background: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        z-index: 10; // 确保在其他元素之上
        h4 {
          margin: 0;
        }
        .box {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          .item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            width: 250px;
            height: 110px;
            border: 1px solid #ccc;
            border-radius: 5px;
            .img {
              width: 80px;
              height: 80px;
              padding-left: 10px;
            }
            .goodsInfo {
              padding: 10px;

              .title {
                font-size: 15px;
              }
              .details {
                font-size: 12px;
                color: #ccc;
              }
              .price {
                font-size: 20px;
                color: red;
              }
            }
          }
        }
      }
    }
  }
}
</style>